<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../css_pc/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css_pc/default.css" />
    <link rel="stylesheet" type="text/css" href="../css_pc/project.css" />
    <title>智慧应用资源池</title>
</head>

<body>
    <header class="u-header">
        <img class="logo" src="../img_pc/logo-h.png" alt="" />
        <div class="account-wrap">
            <div class="account">
                <a herf="" class="avatar-wrap">
                    <div class="avatar">
                        <div class="img" style="background-image:url()"></div>
                        <span class="approve"><span>v</span>已认证</span>
                    </div>
                </a>
                <div class="des">
                    <a class="name" href="">张阿三</a>
                    <a class="logout" href="#">退出</a>
                </div>
            </div>
        </div>
        <div class="main-menu">
            <ul>
                <li class="active"><a href="">首页</a></li>
                <li><a href="">产品</a></li>
                <li><a href="">动态</a></li>
                <li><a href="">案例</a></li>
                <li><a href="">伙伴</a></li>
                <li><a href="">关于</a></li>
            </ul>
        </div>
    </header>
    <section class="u-container">
        <div class="uc-left">
            <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>项目
                </div>
                <ul>
                    <li class="active"><a href="">系统通知</a></li>
                    <li><a href="">管理项目</a></li>
                    <li><a href="">发起项目</a></li>
                </ul>
            </div>
            <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>设置
                </div>
                <ul>
                    <li><a href="">实名认证</a></li>
                </ul>
            </div>
        </div>
        <div class="uc-right">
            <div class="launch-container">
                <div class="title">发起项目</div>
                <div class="content">
                    <form class="form-style3" action="">
                        <div class="form-item fix-width e">
                            <label for="">标题<span class="tips">（标题不超过15个字）</span></label>
                            <div class="form-tips">
                                <div class="info"><span></span>请输入您的真实姓名</div>
                                <div class="err"><span></span>请输入您的真实姓名</div>
                                <div class="right"><span></span>请输入您的真实姓名</div>
                            </div>
                            <div class="form-ctrl">
                                <input type="text" data-count="15"/>
                                <div class="count">15</div>
                            </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">类别<span class="tips">（请选择类别）</span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <div class="select-ctrl">
                                 <span class="icon"><img src="../img_pc/icon-down.png"></span>
                                    <select>
                                        <option>hhhh</option>
                                        <option>hhhh</option>
                                        <option>hhhh</option> 
                                        <option>hhhh</option>
                                        <option>hhhh</option> 
                                        <option>hhhh</option>
                                        <option>hhhh</option>
                                    </select>

                                    <!-- <div data-toggle="dropdown">
                                        <span class="val">Dropdown trigger</span>
                                        <span class="icon"><img src="../img_pc/icon-down.png"></span>
                                    </div>
                                    <ul class="dropdown-menu">
                                        <li>item1</li>
                                        <li>item2</li>
                                        <li>item3</li>
                                        <li>item4</li>
                                    </ul> -->
                                </div>
                            </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">摘要<span class="tips">（摘要不超过50个字）</span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <textarea data-count="50"></textarea>
                                <span class="count">50</span>
                            </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">封面<span class="tips">（支持jpg，png，大小不超过5M）</span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <div class="img-box btn o no-border">
                                    +点击上传图片
                                    <input type="file" class="upload-cover">
                                </div>
                            </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">募集天数
                                <span class="tips">（<span class="warn">提交后不可修改</span>， 天数范围额1-99天）</span>
                            </label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <input  type="number" class="date"/>
                            </div>
                        </div>
                        <div class="form-item">
                            <label for="">计划清单<span class="tips">（<span class="warn">提交后不可修改</span>）</span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <div class="list-head">
                                    <span>名称<span class="tips"></span></span>
                                    <span>单价<span class="tips">（精确到分）</span></span>
                                    <span>数量<span class="tips">（范围1~999）</span></span>
                                    <span>合计</span>
                                </div>
                                <ul class="list-items">
                                    <li>
                                        <input type="text" />
                                        <input type="text" />
                                        <input type="text" />
                                        <span>dsad</span>
                                    </li>
                                </ul>
                                <div class="btn o no-border add-items">+添加清单条目</div>
                            </div>
                        </div>
                        <div class="form-item">
                            <label for="">项目详情</label>
                            <div class="form-ctrl">
                                <textarea>
                                </textarea>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="btn-container">
                                <div class="btn o">保存</div>
                                <div class="btn o">提交</div>
                            </div>
                        </div>
                    </form>
                    <div class="preview">
                        <h6>预览区域</h6>
                        <div class="cover">
                            <div class="img" style="background-image:url()"></div>
                            <div class="txt">预览区域预览区域预览区域预览区域</div>
                        </div>
                        <div class="detail">
                            <ul>
                                <li>
                                    <div class="title">类型：</div>
                                    <div class="val">教学物资</div>
                                </li>
                                <li>
                                    <div class="title">天数：</div>
                                    <div class="val"><span class="date">20</span>天</div>
                                </li>
                                <li>
                                    <div class="title">总价：</div>
                                    <div class="val"><span class="num">202002</span>元</div>
                                </li>
                            </ul>
                        </div>
                        <div class="note">注：项目提交后筹款天数和筹款总金额无法在修改，请仔细确认检查</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="u-footer">
        <div class="copyright">Copyright c 2015 huodui Inc. 保留所有权利 沪ICP备 13042466号-5</div>
        <div class="contact">邮件：huodui@adream.org 电话：021-1234432转221 <img class="wechat" src="../img_pc/icon-wechat.png"></div>
    </footer>
    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/util.js"></script>
    <script>
        $(function() {
        // 绑定对应元素的字数校验事件
        var bind_name = 'input';
        if (navigator.userAgent.indexOf("MSIE") != -1) {
            bind_name = 'propertychange';
        }
        $('[data-count]').bind(bind_name, count);
        $('.upload-cover').change(function(){
            //the url is for test ....
            var url = 'file:///D:/git/crowdfundingmoney/crowdfundingmoney/web-app/images_mobile/demo/demo-jieshao-2.jpg';
            $('.preview .cover .img').css('background-image', 'url(' + url + ')');
        });
        var item = $('.list-items li').clone();
        $('.add-items').click(function(){
            var cp = item.clone();
            $(this).siblings('.list-items').append(cp);
        });
        $('input.date').change(function(){
            $('.preview .date').text($(this).val())
        })
    })

        function count() {
            n = $(this).data('count');
            if($(this).val().length > n) return;
            $(this).siblings('.count').text( n - $(this).val().length );
        }
    </script>
</body>

</html>
